<template>
  <div v-loading.fullscreen.lock="loading">
    <div class="box-card">
      <div class="small-title">入库信息</div>
      <div class="box-info">
        <div class="box-info-item"><span class="label">入库单号:</span> <span class="value">{{detail.billNo}}</span></div>
        <div class="box-info-item"><span class="label">仓库:</span> <span class="value">{{detail.wareHouseName}}</span></div>
        <div class="box-info-item"><span class="label">客户:</span> <span class="value">{{detail.customerName}}</span></div>
        <div class="box-info-item"><span class="label">创建时间:</span> <span class="value">{{detail.createTime}}</span></div>
        <div class="box-info-item"><span class="label">预计到库时间:</span> <span class="value">{{detail.estimateInDate}}</span></div>
        <div class="box-info-item"><span class="label">运输方式:</span> <span class="value">{{detail.transportTypeDesc}}</span></div>
        <div class="box-info-item"><span class="label">入库状态:</span> <span class="value">{{detail.billStatusDesc}}</span></div>
        <div class="box-info-item" v-if="detail.billStatus===200"><span class="label">实际入库时间:</span> <span class="value">{{detail.actualInTime}}</span></div>
        <div class="box-info-item"><span class="label">创建人:</span> <span class="value">{{detail.createUser}}</span></div>
      </div>
    </div>
    <div class="box-card">
      <div class="small-title">货品信息</div>
      <tablePage :tableData="detail.goodInfos" :tableConfig="tableConfig"></tablePage>
    </div>
  </div>
</template>

<script lang="ts">
import { getCustomerInStoreDetail } from '@/api/customerInStore'
import tablePage from '@/components/tablePage/index.vue'
import { defineComponent, ref } from 'vue'
import { useRoute } from 'vue-router'

export default defineComponent({
  name: 'detail',
  components: {
    tablePage
  },
  setup () {
    let detail = ref({})
    let loading = ref(false)
    const tableConfig = {
      columnList: [
        { label: '货品名称', prop: 'goodsName' },
        { label: '重量（吨）', prop: 'goodsCount' },
        { label: '实际入库量（吨）', prop: 'actualInCount' },
        { label: '罐号', prop: 'tankNo' }
      ]
    }
    const route = useRoute()
    const getInfo = async () => {
      const { id } = route.query
      loading.value = true
      const { code, result } = await getCustomerInStoreDetail({ id })
      loading.value = false
      if (code !== 200) return
      detail.value = result
    }
    getInfo()
    return { detail, loading, tableConfig }
  }
})

</script>

<style lang="less" scoped>
  @import url('@/assets/css/label-value.less');
  .box-card {
    &:deep(.el-table__body-wrapper) {
      td {
        font-weight: 500;
        font-size: 16px;
      }
    }
  }
</style>
